import React  from 'react';
import PropTypes from 'proptypes';
import ServerListItem from './server-list-item.jsx';
import Message from './message.jsx';
//require('./server-list.scss');

export default function ServerList(props){
  // static propTypes = {
  //   servers: PropTypes.array.isRequired,
  //   onEditClick: PropTypes.func.isRequired,
  //   onConnectClick: PropTypes.func.isRequired,
  // };

  const groupItemsInRows=(items)=> {
    const itemsPerRow = 4;
    return items.reduce((rows, item, index) => {
      const position = Math.floor(index / itemsPerRow);
      if (!rows[position]) {
        rows[position] = []; // eslint-disable-line no-param-reassign
      }

      rows[position].push(item);
      return rows;
    }, []);
  }

    const { servers, onEditClick, onConnectClick } = props;

    if (!servers.length) {
      return <Message message="No results" type="info" />;
    }
    let view_servers=servers.map((server,idx)=>{
            return (<ServerListItem
                key={server.id}
                onConnectClick={() => onConnectClick(server)}
                onEditClick={() => onEditClick(server)}
                server={server}
              />);
          });
    return (
      <div style={{display:"flex"}}>
        {view_servers}
      </div>
    );
}
